iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

與Vue相遇系列 第 2

Day02-CDN-Vue初始化

  • 分享至 

  • xImage
  •  

疫情影響,既有業務轉型。平常有在寫程式的我,突然被老闆叫去一個專案,開發客戶平台。

起先,還是挺興奮的,直到了解客戶需求後,先是愣住。因為內容表格增刪查找較多,如果用我既有的JS概念,恐怕操作DOM的情況下,永遠都結不了案。

苦思許久,也不斷的嘗試。每當做出一部分後,客戶就會要求增加功能,尤其是在畫面上不停地增刪改查資料內容。

寫了差不多5天之後,即便有MVVM的概念,我的程式碼幾乎接近崩潰的局面。很多時候,可能都不知道自己在寫什麼.......
https://ithelp.ithome.com.tw/upload/images/20200916/20130654EGFCFY0iFO.jpg
直到第六天的凌晨,接到了一通來自廣州同事的電話。

廣州同事:既然你有了JS的概念,何不直接來個框架試試?

那時的我,腦中浮現的卻是:為什麼我要淪落到用框架......... Vue?她還是我認識的JS嗎?

電話結束後,直覺反應就是去問我的電腦(Javis)。Javis立刻啟動Google大神,並帶我聯絡了Vue。網頁前台也很客氣,立刻給了我妳的聯絡方式,讓我和妳約談:

我很迅速地進到了VS CODE,妳也很優雅地走了出來。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>Day02-CDN</title>
</head>

<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            title: "哈囉我叫Vue"
        }
    })
</script>

Vue:哈囉您好,我叫Vue。上面這是我的聯絡方式:

  1. 引入CDN。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  1. 資料規範時,需要一個特定模塊進行掛載,以上述為例,模塊為app。切記不能在模塊外新增其他區塊,資料也必須在模塊內使用。
<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
    })
</script>

  1. 可在data屬性內,建立需要我處裡的資料,我會進行頁面掛載及其他處理。
<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            title: "哈囉我叫Vue"
        }
    })
</script>

Vue:遵守以上原則,我才會願意提供其他服務喔!

第一次見到Vue,這麼親切,讓我更想知道她是否能幫助我,內心雖有疑惑,但好像找到了方向。

待續..........


上一篇
Day01-初見Vue(前言)
下一篇
Day03-v-bind屬性綁定
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言